<template>
    <div id="MobileNewsDetails">
        <header>
            <img src="../../../assets/img/logo.png" alt="">
            <div>济南教育云地图</div>
            <div @click="$router.go(-1)">返回</div>
        </header>
        <div class="content">
            <div class="title">{{newDetails.title}}</div>
            <div class="content-box" v-html="newDetails.content"></div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import * as qs from 'query-string'
    export default {
        name: "MobileNewsDetails",
        data() {
            return {
                newDetails: '',
            }
        },
        methods: {
            getDetails() {
                let {id} = this.$route.query
                axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=show&${qs.stringify({
                    id,
                    catid: 604
                })}`).then(res => {
                    console.log(res)
                    this.newDetails = res.data.news_info
                })
            }
        },
        created() {
            this.getDetails()
        }
    }
</script>

<style scoped lang="less">
    #MobileNewsDetails{
        header {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px solid #DDD;
            position: fixed;
            z-index: 300;
            background: rgba(247, 247, 247, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            width: 100%;
            font-size: 16px;
            padding: 10px 16px 10px 10px;
            box-sizing: border-box;

            > img {
                width: 10vw;
                margin: 0 10vw 0 5vw;
            }

            > div {
                font-size: 16px;
                line-height: 20px;
                color: black;

                &:nth-of-type(2) {
                    margin-left: 20vw;
                }
            }
        }

        .content {
            position: absolute;
            top: 80px;
            width: 100%;

            .title {
                width: 85vw;
                margin: 0 auto;
                font-size: 1.2em;
                color: black;
            }

            .content-box {
                width: 85vw;
                overflow: hidden;
                margin: 5vw auto;

                > * {
                    width: 100%;
                }

                img {
                    width: 100%!important;
                }
            }
        }
    }
</style>